<template>
    <div class="page">
        <head-item :title="playlist.name"></head-item>
        <div>
            <img :src="playlist.coverImgUrl" class="coverImage">
            <div class="list">播放列表</div>
            <div class="item" v-for="item of playlist.tracks" :key="item.id">
                <div class="cover-image">
                    <img :src="item.al.picUrl" class="icon">
                    <span class="name">{{item.name | formatName}}</span>
                </div>

                <img :src="(isPlay&&currentId==item.id)?require('../../assets/images/icons/play.png'):require('../../assets/images/icons/pause.png')" 
                class="play-icon" @click="toggle(item.id)">
            </div>
        </div>
        <audio controls ref="audio" style="display:none"></audio>
    </div>
</template>

<script>
import HeadItem from '@/components/Head.vue';
import Http from '@/api/music.js'
    export default {
        components:{
            HeadItem
        },
        data(){
            return {
                playlist:{},
                isPlay:false,
                currentId:0
            }
        },
        async mounted() {
            var {id} = this.$route.query;
            let res = await Http.getPlaylistDetail(id);
            this.playlist = res.playlist;
        },
        filters:{
            formatName(str){
                if(str.length>10){
                    return str.slice(0,10)+'...'
                }
                return str
            }
        },
        methods:{
            async toggle(id){
                if(id==this.currentId){
                    this.isPlay = !this.isPlay;
                    if(this.isPlay){
                        this.$refs.audio.play();
                    }else{
                        this.$refs.audio.pause();
                    }
                }else{
                    this.currentId = id;
                    let res = await Http.getMusicUrl(id);
                    this.$refs.audio.src = res.data[0].url;
                    this.$refs.audio.play();
                    this.isPlay = true;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
@top:46px;
    .page{
        padding-top: @top;
    }
    .coverImage{
        width: 375px;
        height: 240px;
    }
    .list{
        padding-left: 20px;
        background: #eee;
        line-height: 40px;
        font-size: 15px;
    }
    .item{
        box-sizing: border-box;
        width: 375px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        padding: 10px;
        justify-content: space-between;
        img{
            width: 50px;
            height: 50px;
        };
        .play-icon{
            width: 25px;
            height: 25px;
        }
    }
    .name{
        font-size: 15px;
        padding-left: 20px;
    }
    .cover-image{
        display: flex;
        align-items: center;
    }
    
</style>